<!doctype html>
<html class="no-js">
<head>
    <!-- 公共head Begin -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="萌宠之家-C2B2C社会化电商平台" />
    <meta name="description" content="《萌宠之家-C2B2C社会化电商平台》是一个基于宠物社区的一站式电商平台。" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">

    <title>萌宠之家-C2B2C社会化电商平台->运营后台</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">

    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="icon" type="image/png" href="../statics/img/favicon.png">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="../statics/img/app-icon72x72@2x.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Pet Mall"/>
    <link rel="apple-touch-icon-precomposed" href="../statics/img/app-icon72x72@2x.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="../statics/img/app-icon72x72@2x.png">
    <meta name="msapplication-TileColor" content="#0e90d2">

    <link rel="stylesheet" href="../statics/AmazeUI/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="../statics/AmazeUI/assets/css/admin.css">
    <link rel="stylesheet" href="../statics/AmazeUI/assets/css/app.css">

    <!--[if (gte IE 9)|!(IE)]><!-->
    <script src="../statics/AmazeUI/assets/js/jquery.min.js"></script>
    <!--<![endif]-->
    <script src="../statics/AmazeUI/assets/js/amazeui.min.js"></script>
    <script src="../statics/AmazeUI/assets/js/amazeui.modal.js"></script>
    <script src="../statics/js/list.js"></script>
    <!-- 百度编辑器
    <script type="text/javascript" charset="utf-8" src="../statics/UEditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="../statics/UEditor/ueditor.all.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="../statics/UEditor/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript">
        var ue = UE.getEditor('editor',{
                initialFrameWidth:"100%" //初始化选项
                //scaleEnabled:true//scaleEnabled {Boolean} [默认值：false] //是否可以拉伸长高，默认true(当开启时，自动长高失效)
            }
        );
    </script>
     -->
    <script src="../statics/AmazeUI/assets/js/validator.js"></script>
    <script src="../statics/js/plugin/jquery.livequery.js"></script>
    <!-- 此处form的导入和amazeui.min.js会有冲突，请根据需要使用
    <script src="statics/js/plugin/jquery.form.js"></script>
     -->
    <!--
    <script>
        $().ready( function() {
            AMUI.plugin('mySelected', AMUI.selected);
            $('[data-am-selected]').mySelected({btnWidth: '100%', maxHeight: '200px', btnSize: 'sm', btnStyle: 'secondary'});
        });
    </script>
        -->
    <script src="../statics/js/plugin/jquery.metadata.js"></script>
    <script src="../statics/js/base.js"></script>
    <script src="../statics/js/jquery.lSelect.js"></script>
    <!-- 公共head End -->
</head>
<body>
  <div class="admin-content">
    <div class="admin-content-body">
      <div class="am-cf app-padding-title">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">商品管理</strong> / <small>商品分类</small></div>
      </div>
      
      <hr data-am-widget="divider" class="am-divider am-divider-dotted am-margin-0" />
      
      <form class="am-form">
      <div class="am-g app-padding-toolbar">
        <div class="am-u-sm-12 am-u-md-12">
          <div class="am-btn-toolbar app-padding-toolbar-item">
            <div class="am-btn-group am-btn-group-sm">
              <button type="button" class="am-btn am-btn-default" onclick="location.href='product_category_input.html';"><span class="am-icon-plus"></span> 新增</button>
            </div>
          </div>
        </div>
      </div>
      
      <hr data-am-widget="divider" class="am-divider am-divider-dashed am-margin-0" />
      
      <div class="am-scrollable-horizontal">
        <table id="tblCategoryList" class="am-table am-table-striped am-table-hover table-main am-text-nowrap">
          <thead>
            <tr>
              <th>分类名称</th>
              <th>排序</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
		<h3 id="noData" style="display: none;" class="am-kai am-text-center am-margin-xs">没有找到任何记录!</h3>
      </div>
      </form>
    </div>
  </div>
  <!-- content end -->
<script>
    // 商品分类列表
    let categoryList = new Array();

    let jsonUser;
    let token;

$().ready(function() {

    // 判断用户信息和token是否存在
    jsonUser = sessionStorage.getItem("admin");
    token = sessionStorage.getItem("token");

    if(!jsonUser || !token) {
        top.location.href = 'admin_login.html';
        return;
    }

    // 判断当前页面是否在框架页中，如果不存在，就跳转到后台中心页面
    if(self.location == top.location)
        location.href='admin_center.html';

    // 加载'商品分类'列表数据
    loadCategoryList();

  });// $().ready(function());

/**	加载'商品分类'列表数据 **/
function loadCategoryList() {

    // 加载'数据字典'数据
    $.post('http://localhost:8080/category/getAll', function (result) {

        // 如果返回的数据的响应码不是'成功(200)'
        if(result.code != 200) {
            Modal.alert(result.msg);
            return;
        }

        // 如果返回的数据响应码为200
        // 就进行表格数据填充
        categoryList = result.data;

        // 填充表格数据
        fillCategoryList();

        // 绑定菜单折叠事件
        $(".categoryName").click( function() {

            var level = $(this).parent().attr("level");
            var isHide;

            $(this).parent().nextAll("tr").each(function(){

                var thisLevel = $(this).attr("level");

                if(thisLevel <= level) {
                    return false;
                }

                if(isHide == null) {
                    isHide = $(this).is(":hidden");
                }

                if( isHide ) {
                    $(this).show();
                } else {
                    $(this).hide();
                }

            });// $(this).parent().nextAll("tr").each();

        });// $(".categoryName").click();

    });// $.post();

}// loadCategoryList();

/** 填充表格数据 **/
function fillCategoryList( ) {

    // 清空表格数据
    $('#tblCategoryList tbody').empty();

    // 如果没有集合数据，就直接返回
    if( !categoryList || categoryList.length == 0 ){
        // 设置没有数据提示
        $('#noData').show();
        return;
    }// if();

    // 循环构造单元格数据，并进行填充父分类
    for( let i = 0; i < categoryList.length; i++ ) {

        let category = categoryList[i];

        // 如果当前分类的父id，不等于0，就跳过本次循环
        if( category.parentId != 0 ) continue;

        let trLevel = '<tr level="0">';

        // 分类名称
        let tdName = '<td class="categoryName"><span><i class="am-icon-folder-open-o">&emsp;' + category.name + '</i></span></td>';

        // 排序号
        let tdOrderNo = '<td>' + category.orderNo + '</td>';

        // 编辑按钮
        let tdEdit = '<td>&nbsp;</td>';

        // 封装整条tr单元格
        trLevel += tdName + tdOrderNo + tdEdit + '</tr>';

        // 将构造好的单元格数据，填充到表格中
        $('#tblCategoryList tbody').append(trLevel);

        // 填充子分类列表
        fillChildrenCategoryList(category.id);

    }// for();

}// fillSystemDictionaryTable();

/** 根据父分类id，填充子分类列表 **/
function fillChildrenCategoryList( parentId ) {

    // 循环构造单元格数据，并进行填充
    for( let i = 0; i < categoryList.length; i++ ) {

        let category = categoryList[i];

        // 如果当前分类的父id，不等于传入的分类id，就跳过本次循环
        if( category.parentId != parentId ) continue;

        let trLevel = '<tr level="1">';

        // 分类名称
        tdName = '<td class="categoryName"><span style="margin-left:20px;">' +
            '<i class="am-icon-folder-o">&emsp;' + category.name + '</i></span></td>';

        // 排序号
        let tdOrderNo = '<td>' + category.orderNo + '</td>';

        // 编辑按钮
        tdEdit = '<td><div class="am-btn-toolbar"><div class="am-btn-group am-btn-group-xs">' +
            '<button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary"' +
            'onclick="location.href=\'product_category_input.html?id=' + category.id + '\'">' +
            '<span class="am-icon-pencil-square-o"></span>&nbsp;编辑</button></div></div></td>';


        // 封装整条tr单元格
        trLevel += tdName + tdOrderNo + tdEdit + '</tr>';

        // 将构造好的单元格数据，填充到表格中
        $('#tblCategoryList tbody').append(trLevel);

    }// for();

}// fillChildrenCategoryList( parentId );


</script>
</body>
</html>